<!--  -->
<template>
    <div class="chart_bar chart_bar_0">
        <div class="custom_header" slot="header">
            <h2>
                {{ title }} 
                <span class="time" style="font-size: 14px;">{{ time }}</span>
            </h2>
        </div>
        <div :id="chartId" :style="{ width:  width, height: height }"></div>
    </div>
</template>

<script>
import pieIMinxins from "../minxins/Pie-I.js";

export default {
    name: "Pie-I",
    mixins: [pieIMinxins],
    props: {
        title: {
            default: 'xxx迟到统计表'
        },
        time: {
            default: '2021-03'
        },
        peopleNum: {
            default: 23
        }
    },
    components: {},
    data() {
        return {}
    },
    computed: {
        chartId() {
            return 'main_' + Math.random() * 10;
        }
    },
    methods: {
        init() {
            var chartDom = document.getElementById(this.chartId);
            let myChart = this.$echarts.init(chartDom);
            this.config && myChart.setOption(this.config);
        },
    },
    watch: {
        yData: {
            handle(value) {
                if (value) this.init();
            },
            deep: true,
        },
    },
    created() {
        this.$nextTick(() => {
            this.init();
        });
    },
};
</script>

<style lang='css'>
.chart_bar {
    display: inline-block;
}

.custom_header {

}
</style>